<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>iconfont-HTML</title>
  <style>
    /* 字体图标 */
    @font-face {
      font-family: 'font-taobao'; /*←随便取*/
      src: url('font-taobao.woff');

      /*考虑到兼容性可能这么写↓*/
      /*src: url('font-taobao.eot');
      src: url('font-taobao.eot?#iefix') format('embedded-opentype'), !*←format 表示请求来的字体文件是什么格式的*!
      url('font-taobao.woff2') format('woff2'),
      url('font-taobao.woff') format('woff'),
      url('font-taobao.ttf') format('truetype'),
      url('font-taobao.svg#font-taobao') format('svg');*/

      /*
字体格式有太多选择，不幸的是始终没有一个能在所有的浏览器上通用。这意味着，你必须使用多种字体的方案来保持用户跨平台的一致性体验

字体格式类型主要有几个大分类：TrueType、Embedded Open Type 、OpenType、WOFF 、SVG。

.ttf (TrueType格式)是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+

.woff (Web Open Font格式): 针对网页进行特殊优化，Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+

.eot (Embedded Open Type格式)：字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有IE4+

.svg (SVG格式)：是基于SVG字体渲染的一种格式,支持这种字体的浏览器有Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+
      */
    }

    .iconfont {
      font-family: "font-taobao" !important;
      font-size: 16px;
      font-style: normal;

      /* ↓为了消除图标的锯齿 */
      /*-webkit-font-smoothing: antialiased;*/
      /*-moz-osx-font-smoothing: grayscale;*/
    }

    .cart {
      font-size: 20px;
      color: red;
    }
    /*

    */
  </style>
</head>

<body>
<!--
利用HTML中实体名称/实体编号显示图标的原理，添加自定义字体icon;

优点和缺点:
• 优点：轻量性、灵活性、兼容性好(支持ie6+)，是目前被广泛使用的技术；
• 缺点：大多数的图标字体只能被渲染成单色；需要在html中使用编号，在不同的设备浏览器字体的渲染会略有差别，在不同的浏览器或系统中对文字的渲染不同，其显示的位置和大小可能受到font-size、line-height、word-spacing等css属性的影响，而且这种影响调整起来较为困难；

Unicode 是字体在网页端最原始的应用方式，特点是：

• 兼容性最好，支持 IE6+，及所有现代浏览器。
• 支持按字体的方式去动态调整图标大小，颜色等等。
• 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
• 注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式
-->

<!-- &#x 是html里的固定写法 -->
<div class="cart iconfont">&#xe603</div>
<div class="cart iconfont">&#xe600</div>
</body>

</html>
